<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <header class='header'>
      <h1 @click="addItems()">金桥大屏数据展示</h1>
    </header>
    <div class="content">
      <div class="nav-left">
        <Menu :theme="theme" accordion>
          
            <Submenu name="1">
                <template slot="title">
                    <Icon type="ios-paper"></Icon>
                    categoryOne
                </template>
                <MenuItem name="1-1" @click.native="addItems('<CategOne1></CategOne1>')">categoryOne1</MenuItem>
                <MenuItem name="1-2" @click.native="addItems('<CategOne2></CategOne2>')">categoryOne2</MenuItem>
                <MenuItem name="1-3" @click.native="addItems('<CategOne3></CategOne3>')">categoryOne3</MenuItem>
                <MenuItem name="1-4" @click.native="addItems('<CategOne4></CategOne4>')">categoryOne4</MenuItem>

                <!-- <MenuItem name="1-1"><router-link to="/container/sub_components/categoryOne1">categoryOne1</router-link></MenuItem>
                <MenuItem name="1-2"><router-link to="/container/sub_components/categoryOne2">categoryOne2</router-link></MenuItem>
                <MenuItem name="1-3"><router-link to="/container/sub_components/categoryOne3">categoryOne3</router-link></MenuItem> -->
            </Submenu>
            <Submenu name="2">
                <template slot="title">
                    <Icon type="ios-people"></Icon>
                    categoryTwo
                </template>
                <MenuItem name="2-1"><router-link to="/container/sub_components/categoryTwo1">categoryTwo1</router-link></MenuItem>
                <MenuItem name="2-2"><router-link to="/container/sub_components/categoryTwo2">categoryTwo2</router-link></MenuItem>
            </Submenu>
            <Submenu name="3">
             
                <template slot="title">
                    <Icon type="stats-bars"></Icon>
                    categoryThree
                </template>
                <MenuGroup title="categoryThree1">
                    <MenuItem name="3-1"><router-link to="/container/sub_components/categoryThree1">categoryThree1</router-link></MenuItem>
                    <MenuItem name="3-2"><router-link to="/container/sub_components/categoryThree2">categoryThree2</router-link></MenuItem>
                    <MenuItem name="3-3"><router-link to="/container/sub_components/categoryThree3">categoryThree3</router-link></MenuItem>
                </MenuGroup>
                <MenuGroup title="categoryThree2">
                    <MenuItem name="3-4"><router-link to="/container/sub_components/categoryThree4">categoryThree4</router-link></MenuItem>
                    <MenuItem name="3-5"><router-link to="/container/sub_components/categoryThree5">categoryThree5</router-link></MenuItem>
                </MenuGroup>
            </Submenu>
        </Menu>
      </div>
      <div class="nav-right">
        <div class="layout" :class="{'layout-hide-text': spanLeft < 4}">
          <Row type="flex" class="main-content">
            <Col :span="spanRight">
              <!-- 其他组件的占位 -->
              <div id='container'>
                <CategOne1></CategOne1>
                <CategOne2></CategOne2>
                <CategOne3></CategOne3>
                <CategOne4></CategOne4>
              </div>
            </Col>
             <Col :span="spanLeft" class="layout-menu-left">
                <Menu active-name="1" width="auto">
                    <div class="layout-header">
                      <Button type="text" @click="toggleClick">
                          <Icon type="navicon" size="32"></Icon>
                      </Button>
                    </div>
                    <!-- <div class="layout-logo-left"></div> -->
                    <MenuItem name="1">
                        <Icon type="ios-navigate" :size="iconSize"></Icon>
                        <span class="layout-text">选项 1</span>
                    </MenuItem>
                    <MenuItem name="2">
                        <Icon type="ios-keypad" :size="iconSize"></Icon>
                        <span class="layout-text">选项 2</span>
                    </MenuItem>
                    <MenuItem name="3">
                        <Icon type="ios-analytics" :size="iconSize"></Icon>
                        <span class="layout-text">选项 3</span>
                    </MenuItem>
                </Menu>
            </Col>
          </Row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import CategOne1 from './components/categoryOne1.vue'
import CategOne2 from './components/categoryOne2.vue'
import CategOne3 from './components/categoryOne3.vue'
import CategOne4 from './components/categoryOne4.vue'

export default {
  name: 'app',
  data () {
      return {
          theme: 'dark',
          spanLeft: 2,
          spanRight: 22,
          allComponents:[CategOne1,CategOne2]
      }
    },
  computed: {
      iconSize () {
          return this.spanLeft === 4 ? 14 : 24;
      },

  },
  methods: {
      toggleClick () {
          if (this.spanLeft === 4) {
              this.spanLeft = 2;
              this.spanRight = 22;
          } else {
              this.spanLeft = 4;
              this.spanRight = 20;
          }

      },
      addItems (arg) {
          this.allComponents.push(arg);
          this.render(createElement);
      },
    },
 
  components: {
      CategOne1,
      CategOne2,
      CategOne3,
      CategOne4,
    },
  render:function(createElement) { // h 为 createElement 函数，接受三个参数
      // tag 
      // data
      // children 具体看文档吧
      return createElement('div',this.allComponents.map(function(componentName) {
          return createElement(componentName)
      }))
    }
  }
  
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /*background-image: url(../static/img/bg.png);*/
  height: 100%;
  position: relative;
  /*background: rgba(0,0,0,0);*/
}
html{
  height: 100%;
}
body{
  margin: 0;
  height: 100%;
}

.header{
  width: 100%;
  height: 80px;
  line-height: 80px;
  font-family: "楷体";
  /*background-color: rgba(100,200,200,0.6);*/
  /*background: linear-gradient(to right, rgba(0,100,255,0.8), rgba(100,200,200,0.8));*/
  color: #fff;
  font-size: 20px;
  position: absolute;
}

.content{
  padding-top: 80px;
  height: 100%;
  background-color: #111;
  display: flex;
}
.nav-left{
  background-color: rgba(0,200,200,0.3);
  width: 240px;
  height: 100%;
}
.ivu-menu-dark{
  background-color: rgba(0,200,200,0.1);
}

.nav-right{
  flex: 1;
  height: 100%;
  /*background-color: rgba(100,100,100,1);*/
}

.ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened{
  background-color: rgba(0,200,200,0.1);
}

.ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened .ivu-menu-submenu-title{
  background-color: rgba(0,200,200,0.1);
}

.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item:hover, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title:hover{
  background-color: rgba(0,200,200,0.3);
}

.layout{
    background: #f5f7f9;
    position: relative;
    overflow: hidden;
    height: 100%;
  }
.main-content{
    height: 100%;
}
.layout-menu-left{
    background-color: #fff;
    border-left: 1px solid #111; 
    height: 100%;
}
.layout-header{
    height: 60px;
    background: #fff;
    /*box-shadow: 0 1px 1px rgba(0,0,0,.1);*/
    border-bottom: 1px solid #111;
}

.layout-ceiling-main a{
    color: #9ba7b5;
}
.layout-hide-text .layout-text{
    display: none;
}
.ivu-col{
    transition: width .2s ease-in-out;
}

.ivu-menu-vertical .ivu-menu-item, .ivu-menu-vertical .ivu-menu-submenu-title{
  cursor: pointer;
}

.ivu-menu-item a{
  display: block;
  width: 173px;
  height: 21px;
}

.ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active:hover{
  background: rgba(0,0,255,0.1)!important;
  color: #fff;
}

#container{
    padding-right: 20px;
    padding-bottom: 20px;
    width: 100%;
    height: 100%;
    background-color: rgba(100,200,200,0.5);
  }
</style>








